<template>
	<div id="details">
		<div class="top">
			<div class="top_div">
				<img src="../assets/address/step.jpg" />
				<input type="text" placeholder="请输入商品名称搜索" />
			</div>
			<div class="fujindian">
				<div v-for="itme in datalist_dianpu">
					<div class="dianpu" v-for="it in itme.shops">
						<div class="dianpu_logo">
							<img :src="it.imgs" />
						</div>
						<div class="dianpu_jianjie">
							<p>{{ it.text1 }}</p>
							<div class="jianjie_div" v-for="aa in it.jianjie">
								<span>{{ aa.sp1 }}</span>
								<span>{{ aa.sp2 }}</span>
								<span>{{ aa.sp3 }}</span>
							</div>
							<p class="vip_p">{{ it.vipyouhui }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="all_shops">
			<div class="biaoti">
				<p v-for="item in biaoti">{{item}}</p>
			</div>
			<div class="dianpu_shop">
				<div class="dian-one" v-for="(item,i) in data_shops">
					<div class="img-dian">
						<img :src="item.logoimgs" />
					</div>
					<div class="shop-details">
						<p>{{item.jiatext}}</p>
						<p>{{item.yueshao}}</p>
						<div class="jiage">
							<span>{{item.xianjia}}</span><span>{{item.yuanjia}}</span><span class="num">{{item.yishao}}</span><img :src="item.jia"
							 class="jia-img" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom_div">
			<div class="jiesuan">
				<img src="../assets/Login/basket@2x.png" />
				<span>购物车是空的</span><span></span>
				<button>去结算</button>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				datalist_dianpu: [
					{
						shops: [
							{
								imgs: require("../assets/icon_order.png"),
								text1: "沃尔玛",
								jianjie: [
									{
										sp1: "月售1万+",
										sp2: "起送¥0",
										sp3: "基础运费¥5",
									},
								],
								vipyouhui: "VIP尊享满89元减4元运费券（每月3张）",
							},
						],
					},
				],
				biaoti: ["全部商品", "秒杀", "新鲜水果", "休闲食品", "时令蔬菜", "肉蛋家禽"],
				data_shops: [
					{
						logoimgs: require("../assets/icon_order.png"),
						jiatext: "番茄250g/份",
						yueshao: "月售10件",
						xianjia: "￥33.6",
						yuanjia: "￥55.6",
						yishao: "88",
						jia: require("../assets/Details/加.png"),
					},
					{
						logoimgs: require("../assets/icon_order.png"),
						jiatext: "番茄250g/份",
						yueshao: "月售10件",
						xianjia: "￥33.6",
						yuanjia: "￥55.6",
						yishao: "88",
						jia: require("../assets/Details/加.png"),
					},
					{
						logoimgs: require("../assets/icon_order.png"),
						jiatext: "番茄250g/份",
						yueshao: "月售10件",
						xianjia: "￥33.6",
						yuanjia: "￥55.6",
						yishao: "88",
						jia: require("../assets/Details/加.png"),
					},
					{
						logoimgs: require("../assets/icon_order.png"),
						jiatext: "番茄250g/份",
						yueshao: "月售10件",
						xianjia: "￥33.6",
						yuanjia: "￥55.6",
						yishao: "88",
						jia: require("../assets/Details/加.png"),
					},
				]
			};
		},
	};
</script>
<style >
	/* 单独给页面设置背景色 */
	#details {
		margin-bottom: 49px;
	}
	.top {
		background: white;
	}
	.top_div {
		padding-top: 36px;
		display: flex;
		padding-right: 18px;
		align-items: center;
	}
	.top_div img {
		width: 12.3px;
		height: 21.2px;
		padding-left: 18.5px;
	}
	.top_div input {
		flex: 1;
		border: none;
		height: 32px;
		background: #f5f5f5;

		border-radius: 16px;

		padding-left: 44px;

		margin-left: 16.2px;

	}
	.fujindian {
		margin-top: 10px;
		background: white;
		padding-left: 18px;
	}
	.fujindian .text {
		font-size: 18px;
		color: #333333;
	}
	.dianpu {
		display: flex;
		padding-top: 14px;
	}
	.dianpu_logo img {
		width: 56px;
		height: 56px;
	}
	.dianpu_jianjie {
		flex: 1;
		padding-left: 16px;
	}
	.dianpu_jianjie p {
		font-size: 16px;
		color: #333333;
	}
	.dianpu_jianjie div {
		padding-top: 8px;
	}
	.jianjie_div span {
		font-size: 13px;
		color: #333333;
		padding-right: 16px;
	}
	.fujindian .vip_p {
		font-size: 13px;
		color: #e93b3b;
		padding-top: 8px;
		padding-bottom: 12px;
	}
	.all_shops {
		display: flex;
		padding-top: 10px;
	}
	.all_shops .biaoti {
		width: 76px;
	}
	.biaoti p {
		font-size: 14px;
		color: #333333;
		line-height: 22px;
		text-align: center;
		background: #f5f5f5;
		border-radius: 2px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.biaoti :nth-child(1) {
		background: #ffffff;
	}
	.dianpu_shop {
		flex: 1;
	}
	.dian-one {
		display: flex;
		padding-bottom: 12px;
		border-bottom: #f1f1f1c2 solid 1px;
		padding-top: 12px;
	}
	.dian-one .img-dian {
		padding-left: 16px;
	}
	.img-dian img {
		width: 68px;
		height: 68px;
	}
	.shop-details {
		flex: 1;
		padding-left: 16px;
	}
	.shop-details :nth-child(1) {
		font-size: 14px;
		color: #333333;
	}
	.shop-details :nth-child(2) {
		font-size: 12px;
		color: #333333;
		line-height: 16px;
		padding-top: 6px;
	}
	.jiage {
		padding-top: 6px;
		display: flex;
		align-items: center;
	}
	.jiage img {
		width: 19.5px;
		height: 19.4px;
	}
	.jiage :nth-child(1) {
		font-size: 14px;
		color: #e93b3b;
		line-height: 20px;
	}
	.jiage :nth-child(2) {
		font-size: 10px;
		color: #999999;
		line-height: 20px;
		padding-left: 10px;
		text-decoration: line-through;
		flex: 2;
	}
	.num {
		font-size: 14px;
		color: #333333;
		line-height: 16px;
		padding-left: 11px;
		padding-right: 11px;
	}
	.jia-img {
		padding-right: 18px;

	}
	.bottom_div {
		position: fixed;
		bottom: 0px;
	}
	.bottom_div .jiesuan {
		display: flex;
		align-items: center;
		padding-left: 24px;
		height: 49px;
	}
	.jiesuan img {
		width: 28px;
		height: 26px;
	}
	.jiesuan :nth-child(2) {
		font-size: 12px;
		color: #333333;
		padding-left: 30px;
	}
	.jiesuan button {
		background: #4fb0f9;
		height: 49px;
		width: 98px;
		margin-right: 0px;
		margin-left: 120px;
		border: none;
		font-size: 14px;
		color: #FFFFFF;
	}
</style>
